<template>
    <div id="app">
        <!-- <div id="app2">
          <h1 v-test="'777'">
            <a href="">aaa</a>
            app
          </h1>
        </div> -->
        <!-- <refCom></refCom> -->
        <!-- <emitsValidate @click="handleClick"></emitsValidate> -->
        <!-- <setupCom :msg="msg"></setupCom> -->
        <setupSugar></setupSugar>
    </div>
</template>
<script>
import refCom from "./components/01.ref选项式.vue"
import emitsValidate from "./components/02.emits验证.vue"
import setupCom from "./components/03.setup.vue"
import setupSugar from "./components/04.setup语法糖.vue"
//vue3不需要nativa修饰符,因为dom原生事件会被绑定到组件的根节点上
//vite中一定要加文件的后缀名
export default {
    data() {
        return {
            msg: '在小小的花园里面挖呀挖呀挖'
        }
    },
    methods: {
        handleClick() {
            console.log('组件的自定义事件click触发了')
        }
    },
    components: {
        refCom,
        emitsValidate,
        setupCom,
        setupSugar
    }
}
</script>
<style scoped>
/* 深度选择器 作用在模块化的样式中,模块化样式的时候,样式可能加不上,使用深度选择器可以解决这个问题 */

/* vue2 深度选择器 */
/* #app >>> a {
  color: red
} */
/* #app /deep/ a {
  color: red
} */

/* vue3 使用:deep() */

#app :deep(a) {
    color: green;
}
</style>